window.addEventListener('load',function() {
    var r_ico = document.querySelector('.r_ico');
    var l_ico = document.querySelector('.l_ico');
    var carousel_chart = document.querySelector('.carousel_chart');
    var lunbotu_width = carousel_chart.offsetWidth;
    console.log('轮播图的宽度'+ lunbotu_width);

    // 1,左右箭头，显示与隐藏
    carousel_chart.addEventListener('mouseover',function() {
        r_ico.style.display = 'block';
        l_ico.style.display = 'block';

        clearInterval(timer);
        timer = null;  // 清空定时器，并释放
    })

    carousel_chart.addEventListener('mouseout',function() {
        r_ico.style.display = 'none';
        l_ico.style.display = 'none';

        timer = setInterval(function() {
           r_ico.click();
    
        },4000)
    })

    // 2,动态添加小圆点
    var ul = carousel_chart.querySelector('ul');
    var ol = carousel_chart.querySelector('ol');

    /* console.log(ul.children.length); */  // ul 里 5个li

    for(var i=0;i<ul.children.length;i++) {
        // 动态生成li
        var li = document.createElement('li');
        ol.appendChild(li);

        // 给每个小Li添加索引号
        li.setAttribute('date-index',i);

        // 在添加li的同时 ，我们给li点添加点击事件
        li.addEventListener('click',function() {
            for(var i = 0 ; i < ol.children.length ; i++) {
                // 排他思想
                ol.children[i].className = '';
            }
            this.className = 'current';

            // 获取li 的索引号
            var index = this.getAttribute('date-index');

            // 把索引号 给 num 
            num = index ;
            // 把索引号 给 num ,
            sricle =index;
            /* console.log(this.getAttribute('date-index')); */

            // 轮播图不是li移动 ，而是ul 移动，而且ul 还必须有定位；
            // 移动的距离，索引号 * 图片的宽度 ，结果要是负值，

            // 开始引入animation 动画函数，必须放在 index.js 的上方，因为js是从上到下执行的，不放在上面找不到
            
            
            animation(ul,-index * lunbotu_width);
            
        })
       
    }
    ol.children[0].className = 'current';

    // 3，右箭头，点击切换图片
    // 克隆第一个Li 放到ul 的后面，实现无缝滚动,js 动态添加。小圆圈不会跟随图片的增加而增加，因为克隆写在动态生成小圆圈的后面
    var frist = ul.children[0].cloneNode(true)// 里面是TRUE 为深度克隆，除了克隆节点 还克隆里面的内容
    ul.appendChild(frist);
    
    // num ,控制图片轮播
    var num = 0;

    // 声明 sricle 变量 控制小圆点
    var sricle = 0;

    // 点击右边箭头
    var flag = true; //节流阀
    r_ico.addEventListener('click',function() {
       if(flag) {

        flag = false;  // 防止连续点击，过快切换

         // 无缝滚动，
         num++;
         if (num == ul.children.length -1) {
             // 不添加动画，直接快速的跳到 0 ;
             ul.style.left = 0 ;
             // num重新赋值，继续循环
             num = 0;
 
         }
        
         animation(ul, -num * carousel_chart.offsetWidth , function(){
            flag = true; // 当图片播放完后，打开节流阀，然后继续点击
         });
         
          // 小圆点切换
         sricle++;
         if (sricle == ol.children.length){
             sricle = 0;
 
         }
         for(var i = 0 ; i < ol.children.length; i++) {
             ol.children[i].className = '';
         }
         
         ol.children[sricle].className = 'current';
       }
       
        
    })

   // 4，左箭头，点击切换图片

    l_ico.addEventListener('click',function() {
        
       if(flag) {

        flag = false;  // 关闭节流阀，

        if (num == 0) {
            // 不添加动画，直接快速的跳到 0 ;
            // num重新赋值，继续循环;
            num = ul.children.length-1;  // 5
            ul.style.left = -num * lunbotu_width + 'px'; 
           

        }
        num--;
        animation(ul, -num * carousel_chart.offsetWidth, function() {
            flag = true; 
        });
        
         // 小圆点切换
        sricle--;
        if (sricle < 0){
            sricle = ol.children.length-1; // 5

        }
        
        for(var i = 0 ; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        
        ol.children[sricle].className = 'current';
       }
        
      
    })

    // 5 ,自动播放
    var timer = setInterval(function() {
        //开一个定时器，手动调用右箭头按钮
        r_ico.click();

    },4000)

})